<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div align="center">
		<form>
			<div>
				<input type="text" name="textfield" id="mytext" /> 
				<input type="submit" name="search" value ="search">
			</div>
		</form>
		<div id = "result" style="width:150px;height:150px;overflow:auto;">
			<table id ="mytable">		
			</table>
		</div>
	</div>
	<script type="text/javascript">
		var inp = document.getElementById("mytext");
		var table = document.getElementById("mytable")
		inp.addEventListener("input",function(e){
			var op = fuzzyQuery(inp.value);
			op.createTable();
		}) 

		function fuzzyQuery(value){
			var rs = {};
			rs.createTable=function(){
				table.innerHTML="";
				this.query(value);
				
			}

			rs.query=function(value){
				console.log(value);
				if(value!=0){
					var url = "http://localhost:8081/FuzzyQuery/query?fuzzy="+value;
					var xhr=new XMLHttpRequest();
					xhr.open("GEt",url);
					xhr.onreadystatechange=function(){
						if(xhr.readyState==4&&xhr.status==200){
							var areas=JSON.parse(xhr.responseText);
							areas.forEach((item,index)=>{
								var tr = document.createElement("tr");
								var td = document.createElement("td");
								td.innerHTML=item;
								tr.appendChild(td);
								table.appendChild(tr);
							})
						}
					}
					xhr.send(null);	
				}
				//创建一个XMLHttpRequest对象
			}
			return rs
		}
	</script>
</body>
</html>